<template>
  <!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑-->
  <!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑-->
  <!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑-->
  <!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑--><!-- 频道编辑  频道编辑-->

  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell title="我的频道" :border="false">
      <van-button
        size="mini"
        round
        type="danger"
        plain
        @click="isEdit = !isEdit"
        >{{ isEdit ? "完成" : "编辑" }}</van-button
      >
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
        class="channel-item"
        v-for="(channel, index) in myChannels"
        :key="index"
        @click="onMyChannelClick(channel, index)"
      >
        <span class="text" :class="{ active: active === index }" slot="text">
          {{ channel.name }}
        </span>
        <!-- 通过插槽自定义图标 -->
        <van-icon
          v-show="isEdit && !fiexdChannels.includes(channel.id)"
          slot="icon"
          name="delete-o"
        />
      </van-grid-item>
    </van-grid>
    <!-- /我的频道 -->

    <!-- ============================================================================================= -->

    <!-- 频道推荐 -->
    <van-cell title="频道推荐" :border="false"></van-cell>
    <van-grid class="recommend-grid" :gutter="10" direction="horizontal">
      <van-grid-item
        class="channel-item"
        v-for="item in recommendChannels"
        :key="item.id"
        :text="item.name"
        icon="add-o"
        @click="onAddChannels(item)"
      />
    </van-grid>
    <!-- /频道推荐 -->
  </div>
</template>

<script>
// 引入lodash 工具库
import 'lodash'
import {
  getAllChannels,
  addUserChannel,
  deleteUserChannel
} from '@/api/Channels'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'ChannelEdit',

  components: {},

  props: {
    // 我的频道列表数据
    myChannels: {
      type: Array,
      required: true
    },

    // 频道高亮的索引
    active: {
      type: Number,
      required: true
    }
  },

  data () {
    return {
      allChannels: [], // 所有频道列表
      isEdit: false, // 控制 编辑按钮 和 删除图标 的显示状态
      fiexdChannels: [0] // 固定频道,不允许删除
    }
  },

  // 计算属性会观测内部依赖数据的变化
  // 如果依赖的数据发生变化,则计算属性会重新执行
  computed: {
    // 计算出推荐频道数据列表
    recommendChannels () {
      // 使用lodash工具库的方法,把 [所有频道数据] 和 [我的频道数据] 通过id来排除,
      // 思路: 所有频道 - 我的频道 = 推荐频道
      /* return _.differenceBy(this.allChannels, this.myChannels, 'id') */

      return this.allChannels.filter(allChannels => {
        const mychannel = this.myChannels.find(myChannel => {
          return myChannel.id === allChannels.id
        })
        return !mychannel
      })
    },

    // 获取user
    ...mapState(['user'])
  },

  watch: {},

  created () {
    this.loadAllChannels()
  },

  mounted () {},

  methods: {
    // 获取全部频道列表
    async loadAllChannels () {
      /**
       * 具体实现步骤:
       * 1. 调用接口模块 向服务器发起get请求
       * 2. 拿到服务器返回的数据,存入定义好的data数据里
       *
       * 注意:此方法不会被人为进行调用,需要去钩子函数里调用
       */
      try {
        const { data } = await getAllChannels()
        this.allChannels = data.data.channels
      } catch (error) {
        this.$toast('获取频道列表失败')
      }
    },

    // 点击推荐频道里的选项,添加到我的频道里的选项里
    async onAddChannels (channel) {
      /**
       * 具体实现步骤:
       * 1. 给频道推荐里的所有item,都循环绑定一个事件
       * 2. 把当前点击的item,push到 我的频道数组里
       */
      this.myChannels.push(channel)
      if (this.user) {
        // 已登录，把数据通过接口请求放到线上
        try {
          await addUserChannel({
            id: channel.id, // 频道 ID
            seq: this.myChannels.length // 序号
          })
        } catch (err) {
          this.$toast('保存失败，请稍后重试')
        }
      } else {
        // 未登录，把数据存储到本地
        setItem('TOUTIAO_CHANNELS', this.myChannels)
      }
    },

    // 切换频道 和 删除频道 功能
    onMyChannelClick (channel, index) {
      /**
       * 具体实现步骤:
       * 1. 给我的频道里的 每一个item 都循环绑定此事件
       * 2. 点击item的时候,判断编辑按钮的状态
       * 3. 编辑状态 : 执行删除频道
       * 4. 非编辑状态 : 执行切换频道
       * 5. 跳转到对应页面实现方法,获取到点击的这个元素的索引值,通过子传父,传值,传给父组件
       * 6. 怎么操作的请看父组件里的 update-activek 自定义事件对应的方法
       */
      if (this.isEdit) {
        // 如果是固定频道,则不删除
        if (this.fiexdChannels.includes(channel.id)) {
          return
        }
        // 执行删除频道
        if (index <= this.active) {
          this.$emit('update-active', this.active - 1, true)
        }
        this.myChannels.splice(index, 1)
        this.deleteChannel(channel)
      } else {
        // 执行切换频道
        this.$emit('update-active', index, false)
      }
    },

    // 删除频道持久化
    async deleteChannel (channel) {
      try {
        if (this.user) {
          // 已登录，将数据存储到线上
          await deleteUserChannel(channel.id)
          // console.log("真的存上去了吗?");
        } else {
          // 未登录，将数据存储到本地
          setItem('TOUTIAO_CHANNELS', this.myChannels)
        }
      } catch (error) {
        console.log(error)
        this.$toast('删除频道失败，请稍后重试')
      }
    }
  }
}
</script>

<style scoped lang="less">
.channel-edit {
  .channel-item {
    height: 86px;
    /deep/ .van-grid-item__content {
      background-color: #f5f5f6;
      .van-grid-item__icon-wrapper {
        position: unset;
      }
      .van-grid-item__text,
      .text {
        color: #222;
        font-size: 28px;
        // white-space: nowrap;
      }
      .active {
        color: red;
      }
    }
  }

  // 我的频道右上角删除图标

  /deep/ .van-icon-delete-o {
    position: absolute;
    right: -10px;
    top: -10px;
    font-size: 36px;
    color: #ccc;
  }

  // 频道推荐的加号图标
  /deep/ .recommend-grid {
    .van-grid-item__content {
      color: #ccc;
      .van-icon {
        font-size: 25px;
      }
      .van-grid-item__text {
        font-size: 25px;
        margin-top: 0;
      }
    }
  }
}
</style>
